<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>VisionUtils Test</title>
</head>

<body>

<h1>VisionUtils Test - F12 to open dev tools to see console</h1>

</body>
<script src="vision_utils_test.js"></script> <!-- 路径视情况调整 -->
<script>
    (function () {
        const VisionUtils = window.VisionUtils;

        function test(name, fn) {
            try {
                fn();
                console.log(`✅ ${name}`);
            } catch (e) {
                console.error(`❌ ${name}\n   ${e.message}`);
            }
        }

        function assertEqual(actual, expected) {
            if (JSON.stringify(actual) !== JSON.stringify(expected)) {
                throw new Error(`Expected ${JSON.stringify(expected)}, got ${JSON.stringify(actual)}`);
            }
        }

        function assertClose(actual, expected, delta = 0.01) {
            if (Math.abs(actual - expected) > delta) {
                throw new Error(`Expected ~${expected}, got ${actual}`);
            }
        }

        // ✅ 使用 VisionUtils.xxx 而不是解构赋值避免命名冲突
        test("parseRGB - rgba", () => {
            assertEqual(VisionUtils.parseRGB("rgba(255, 200, 100, 0.5)"), { r: 255, g: 200, b: 100, a: 0.5 });
        });

        test("relativeLuminance - black", () => {
            assertClose(VisionUtils.relativeLuminance({ r: 0, g: 0, b: 0 }), 0);
        });

        test("contrastRatio - black vs white", () => {
            const l1 = VisionUtils.relativeLuminance({ r: 0, g: 0, b: 0 });
            const l2 = VisionUtils.relativeLuminance({ r: 255, g: 255, b: 255 });
            assertClose(VisionUtils.contrastRatio(l1, l2), 21, 0.5);
        });

        test("analyzeContrast - black on white", () => {
            const result = VisionUtils.analyzeContrast(
                { r: 0, g: 0, b: 0 },
                { r: 255, g: 255, b: 255 }
            );
            if (!result.level.includes("AAA")) throw new Error("Expected AAA");
        });

        test("analyzeContrast - black on white", () => {
            const result = VisionUtils.analyzeContrast(
                { r: 0, g: 0, b: 0 },
                { r: 255, g: 255, b: 255 }
            );
            if (!result.level.includes("AAA")) throw new Error("Expected AAA");
        });



        test("getEffectiveBgColor - inherited background", () => {
            const parent = document.createElement("div");
            parent.style.backgroundColor = "rgb(100, 150, 200)";
            const child = document.createElement("div");
            parent.appendChild(child);
            document.body.appendChild(parent);

            const result = VisionUtils.getEffectiveBgColor(child);
            assertEqual(result, {"r":100,"g":150,"b":200,"a":1});

            parent.remove(); // 清理
        });

        test("isColorBright", () => {
            const bright = { r: 255, g: 255, b: 255 };
            const dark = { r: 0, g: 0, b: 0 };
            if (!VisionUtils.isColorBright(bright)) throw new Error("Expected bright color to be bright");
            if (VisionUtils.isColorBright(dark)) throw new Error("Expected dark color to be dark");
        });

        test("computeAverageBackgroundColorInViewport - simple DOM", () => {
            // 创建几个视口内元素
            const el1 = document.createElement("div");
            const el2 = document.createElement("div");
            el1.style.backgroundColor = "rgb(255, 0, 0)";
            el2.style.backgroundColor = "rgb(0, 0, 255)";
            Object.assign(el1.style, {
                width: "100px", height: "100px", position: "absolute", top: "10px", left: "10px"
            });
            Object.assign(el2.style, {
                width: "100px", height: "100px", position: "absolute", top: "120px", left: "10px"
            });
            document.body.appendChild(el1);
            document.body.appendChild(el2);

            const avgColor = VisionUtils.computeAverageBackgroundColorInViewport();
            console.log(avgColor)
            const { r, g, b } = avgColor;
            if (!(r > 100 && b > 100)) {
                throw new Error(`Unexpected average color: ${JSON.stringify(avgColor)}`);
            }

            el1.remove();
            el2.remove();
        });
    })();
</script>

</html>
